<template>
	<el-dialog title="面对面建群" center :destroyOnClose='true' :show-close="true" @close="handleClosed" :fullscreen="true"
		:visible="isshow">
		<div class="pageFaceToFaceMobile textCenter">
			<div>
				<div v-show='FaceToFaceItem.isshow' class="goBackButtonBox">
					<div @click="handleClosed(false)" class="cursor-pointer el-icon-arrow-left font24"></div>
				</div>
				<div class="">
					<div class="color-smill textCenter" v-show='!FaceToFaceItem.isshow'>
						<div class="font12">{{FaceToFaceItem.position.longitude}}---{{FaceToFaceItem.position.latitude}}
						</div>
						和身边的朋友输入的四个数字进入一个群聊中
					</div>
					<ul class="numberList">
						<li v-for="value,index in FaceToFaceItem.numberList">
							<span class="NumNodeCls" v-show="!value.active"></span>
							<span class="NumCls font20" v-show="value.active">{{value.num}}</span>
						</li>
					</ul>
					<div class="color-smill textCenter" v-show='FaceToFaceItem.isshow'>
						<div class="font12">{{FaceToFaceItem.position.longitude}}---{{FaceToFaceItem.position.latitude}}
						</div>
						这些朋友也将进入群聊{{FaceToFaceItem.groupNumber}}
					</div>
					<div class="scrollbarOverflow  overHid FaceToFaceUserList" v-show="FaceToFaceItem.isshow">
						<div class="item" :title="`Id:${FaceToFaceItem.fromId}`">
							<el-image style="width: 50px; height: 50px;" :src="storeUserinfo.url+'?w=200&h=200&q=75'"
								fit="fill">
								<div slot="error" class="image-slot">
									<el-image style="width: 50px; height: 50px;"
										:src="$handledImageError(storeUserinfo.url+'?w=200&h=200&q=75','tx')"
										fit="fill"></el-image>
								</div>
							</el-image>
							<div class="textCenter height20  overflow" :title="`${storeUserinfo.username}`">
								{{storeUserinfo.username}}
							</div>
						</div>
						<div class="item" v-for="value,index in onlineFaceToFaceUserList" :key='value.fromId'
							v-show="value.fromId!=FaceToFaceItem.fromId" :title="`Id:${value.fromId}`">
							<el-image style="width: 50px; height: 50px;" :src="value.fromUrl+'?w=200&h=200&q=75'"
								fit="fill">
								<div slot="error" class="image-slot">
									<el-image style="width: 50px; height: 50px;"
										:src="$handledImageError(value.fromUrl+'?w=200&h=200&q=75','tx')"
										fit="fill"></el-image>
								</div>
							</el-image>
							<div class="textCenter height20  overflow" :title="`${value.fromName}`">
								{{value.fromName}}
							</div>
						</div>
						<div class="item">
							<div class="emptyItem"></div>
							<div class="textCenter height20"></div>
						</div>
					</div>
					<div class="" v-show="!FaceToFaceItem.isshow">
						<ul class="keyboard">
							<li @click="handleInputNumber(value)" class="item" v-for="value in 9" :key='value'>
								{{value}}
							</li>
							<li class="item"></li>
							<li @click="handleInputNumber(0)" class="item">0</li>
							<li @click="handleDeleteNumber" class="item">X</li>
						</ul>
					</div>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="handleIntoGroup" v-loading="loadingINTO"
						v-show="FaceToFaceItem.isshow">进入该群</el-button>
					<el-button class="marginT45 " type="primary" plain size="small" @click="handleClosed">取消</el-button>
				</span>
			</div>
			<div v-show="!this.isGetPosition" style="color: #f00;">
				使用此功能需要开启定位权限
			</div>
		</div>
	</el-dialog>

</template>

<script>
	import {
		debounce
	} from "@/utils/common.js";
	import {
		faceToFaceCreate,
		faceToFaceCreateV2
	} from "@/api/faceToface"
	import Storage from "@/utils/session.js"

	export default {
		name: "pageFaceToFaceMobile",
		props: {
			isshow: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				FaceToFaceItem: {
					groupNumber: '',
					numberList: [{
						active: false,
						num: 0
					}, {
						active: false,
						num: 0
					}, {
						active: false,
						num: 0
					}, {
						active: false,
						num: 0
					}],
					isshow: false,
					ItemId: '',
					position: {}, //经纬度obj
				},
				loadingINTO: false,
				onlineFaceToFaceUserList: [],
				count: 1,
				userInfo: {},
				isGetPosition: false, //是否拥有定位权限
			}
		},
		computed: {
			storeUserinfo() {
				return this.$store.getters.userInfo;
			},
			newMessage() {
				return this.$store.getters.newMessage
			}
		},
		mounted() {
			this.initData()
			if (this.count) {
				let userinfo = this.storeUserinfo.Id ? this.storeUserinfo : JSON.parse(Storage.getSession())
				this.FaceToFaceItem.fromId = userinfo.Id;
				this.FaceToFaceItem.fromName = userinfo.username;
				this.FaceToFaceItem.fromUrl = userinfo.url;
			}
			this.count = 0
		},
		methods: {
			//获取定位权限
			getPositionPermission: debounce(function() {
				let _this = this;
				if ("geolocation" in window.navigator) {
					let position = this.$store.getters.position;
					try {
						if (position.latitude != undefined) {
							this.FaceToFaceItem.position = position;
							this.isGetPosition = true;
						}
					} catch (error) {
						//TODO handle the exception
					}
					
					window.navigator.geolocation.getCurrentPosition(function(position) {
						var latitude = position.coords.latitude;
						var longitude = position.coords.longitude;
						var accuracy = position.coords.accuracy
						_this.FaceToFaceItem.position = {
							latitude,
							longitude
						}
						if (latitude != undefined && !!latitude) {
							_this.$store.commit("setPosition", {
								latitude,
								longitude
							})
						}

						_this.isGetPosition = true;
					}, function(error) {
						_this.isGetPosition = false;
						let msg = error.code + '--';
						switch (error.code) {
							case error.PERMISSION_DENIED:
								msg+="请授权地理位置。"
								break;
							case error.POSITION_UNAVAILABLE:
								msg += "位置信息是不可用的。"
								break;
							case error.TIMEOUT:
								msg += "请求用户地理位置超时。"
								break;
							case error.UNKNOWN_ERROR:
								msg += "发生未知错误。" + error.message
								break;
						}
						_this.$message({
							message: msg + " 请检查您的设置或稍后再试。",
							type: 'warning',
							showClose: true,
							duration: 4000
						});
						console.error("Error Code = " + error.code + " - " + error.message);
					}, {
						enableHighAccuracy: true,
						timeout: 4000,
						maximumAge: 0
					});
				} else {
					_this.$message({
						message: "您正在使用的浏览器不支持地理位置API ",
						type: 'warning',
						showClose: true,
						duration: 1000
					});
				}
			}),
			//初始化页面
			initData(value) {
				this.getPositionPermission();
				if (!this.isGetPosition) {
					return
				}

			},
			//进入群聊
			handleIntoGroup: debounce(function() {
				this.loadingINTO = true;
				let obj = Object.assign({}, this.FaceToFaceItem);
				delete obj.numberList;
				delete obj.isshow;
				faceToFaceCreateV2(obj).then(res => {
					if (res.status) {
						this.$message({
							message: res.message,
							type: 'success',
							duration: 1000
						});
						//重新请求联系人列表
						this.$store.commit("setIsGetRelationshiplist", true)
						this.loadingINTO = false;
						this.handleClosed();
					} else {
						this.$message({
							message: res.message || "网络错误，请刷新重试",
							type: 'warning',
							duration: 1000
						});
						this.handleClosed();
					}
				}).catch(() => {
					this.loadingINTO = false;
				})

			}),
			// 面对面建群 输入数据
			handleInputNumber(value) {
				if (!this.isGetPosition) {
					this.$message({
						message: "请开放定位权限",
						type: 'warning',
						showClose: true,
						duration: 700
					});
					return
				}
				let length = this.FaceToFaceItem.numberList.length;
				if (!this.FaceToFaceItem.isshow) {
					this.FaceToFaceItem.groupNumber = "";
					try {
						for (let i = 0; i <= length; i++) {
							if (this.FaceToFaceItem.numberList[i].active === false) {
								this.FaceToFaceItem.numberList[i].num = value;
								this.FaceToFaceItem.numberList[i].active = true;
								this.FaceToFaceItem.isshow = i === 3
								this.FaceToFaceItem.groupNumber += "" + value;
								i === 3 ? this.handleSend(this.FaceToFaceItem) : ""
								throw new Erroe("stop xh");
							}
							this.FaceToFaceItem.groupNumber += "" + this.FaceToFaceItem.numberList[i].num;
						}
					} catch (e) {
						//TODO handle the exception
						e != "stop xh" ? e : ''
					}
				}
			},
			//删除数据
			handleDeleteNumber() {
				let length = this.FaceToFaceItem.numberList.length - 1;
				for (let i = length; i >= 0; i--) {
					if (this.FaceToFaceItem.numberList[i].active === true) {
						this.FaceToFaceItem.numberList[i].num = 0;
						this.FaceToFaceItem.numberList[i].active = false;
						return;
					}
				}
			},
			//关闭的回调
			handleClosed(code = true) {
				let length = this.FaceToFaceItem.numberList.length - 1;
				this.FaceToFaceItem.groupNumber = "";
				this.FaceToFaceItem.isshow = false;
				this.FaceToFaceItem.ItemId = '';
				this.loadingINTO = false;
				for (let i = length; i >= 0; i--) {
					this.FaceToFaceItem.numberList[i].num = 0;
					this.FaceToFaceItem.numberList[i].active = false;
				}
				if (code) {
					this.$emit("shs-close", false)
				}
			},
			// //发送数据
			handleSend(data) {
				let obj = {
					groupNumber: data.groupNumber,
					position: data.position,
					type: 55
				}
				this.$store.commit("setOnSend", obj)
			}

		},
		watch: {
			"storeUserinfo": {
				deep: true,
				immediate: true,
				handler: function(value, oldvalue) {
					this.FaceToFaceItem.fromId = value.Id;
					this.FaceToFaceItem.fromName = value.username;
					this.FaceToFaceItem.fromUrl = value.url;
				}
			},
			"newMessage": {
				deep: true, // 深度监听
				handler: function(newVal, oldVal) { // 监听属性的回调方法
					//判断消息类型
					if (this.$store.getters.isExecute) return
					if (newVal.type === 55) {
						//面对面建群信息  群聊创建成功1 缺少参数0 定位错误-1
						if (newVal.status) {
							this.FaceToFaceItem.ItemId = newVal.data.ItemId;
							this.FaceToFaceItem.describe = newVal.data.describe;
							this.onlineFaceToFaceUserList = newVal.data.userlist;
							this.FaceToFaceItem.signGroupNumber = newVal.data.signGroupNumber
						} else {
							// error
							if (this.FaceToFaceItem.ItemId === newVal.data.ItemId && this.FaceToFaceItem
								.groupNumber === newVal.data.groupNumber && this.FaceToFaceItem.signGroupNumber ==
								newVal.data.signGroupNumber) {
								this.$message({
									message: res.message || "网络错误，请刷新重试",
									type: 'warning',
									duration: 1000
								});
								this.handleClosed();
							}
						}
					}
				},
				immediate: false // 页面初始化时是否触发回调
			},

		}
	}
</script>

<style scoped>
	.pageFaceToFaceMobile {
		padding: 8vw;
		margin-top: 20px;
		/* margin-top: calc(35%); */
	}

	.FaceToFaceUserList {
		max-height: 250px;
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.FaceToFaceUserList .item {
		width: 75px;
		margin: 5px;
		text-align: center;
	}

	.emptyItem {
		width: 50px;
		height: 50px;
		border: 1px solid #000;
		box-sizing: border-box;
		animation-name: emptyItemAnimation;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-direction: alternate-reverse;
	}

	/* 动画代码 */
	@keyframes emptyItemAnimation {
		0% {
			border: 1px solid #000;
		}

		100% {
			border: 1px solid #f3f3f3;
		}
	}

	.numberList {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		list-style-type: none;
		margin: 0;
		padding: 0;
		height: 20px;
		margin-top: 10px;
	}

	.numberList .NumNodeCls {
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: #5d5d5d;
		box-shadow: 1px -1px 4px #000;
	}

	.numberList .NumCls {
		display: inline-block;
	}

	.keyboard {
		list-style-type: none;
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		margin: 0;
		padding: 0;
	}

	.keyboard .item {
		cursor: pointer;
		width: calc(100%/3);
		line-height: 35px;
		text-align: center;
		font-size: 20px;
	}

	.keyboard .item:hover {
		background-color: #f9feff;
	}

	.keyboard .item:active {
		background-color: #e9f8ff;
	}

	/* 返回的按钮 */
	.goBackButtonBox {
		position: relative;
		width: 100%;
		height: 50px;
		line-height: 50px;
		cursor: pointer;
		box-sizing: border-box;
		text-align: left;
	}
</style>